<template>
  <el-card style="margin: 20px">
    <el-row :gutter="10">
      <el-col :span="4">
        <el-image :src="BASE_URL + tableData.poster"
                  style="width: 180px;height: auto;"
                  alt="Film poster"/>
      </el-col>
      <el-col :span="9">
        <div style="margin-left: 20px;">
          <p style="font-size: 20px;font-weight: bold">{{ tableData.filmName }}</p>
          <p style="font-size: 14px;color: #666666"> ({{ tableData.englishName }})</p>
          <p>{{ tableData.directorName }}</p>
          <p>{{ tagFormatter(tableData, null, tableData.tag) }}</p>
          <p>{{ nationalityFormatter(tableData, null, tableData.region) }} / {{ tableData.duration }}分钟</p>
          <p>{{ tableData.releaseDate }} 上映 </p>
          <span>电影评分</span>
          <el-rate
              disabled
              show-score
              text-color="#ff9900"
              style="margin-left: 10px;"
              score-template="{value} points"
          />
        </div>
      </el-col>
      <el-col :span="10">
        <div style="height: 180px;">
          <h3>影片简介</h3>
          <p style="font-size: 14px;color: #666666">{{ tableData.synopsis }}</p>
        </div>
        <div>
          <el-button type="primary" style="float: right" @click="editFilm(tableData.id)">修改
          </el-button>
        </div>
      </el-col>
    </el-row>
  </el-card>

  <el-button type="primary" style="margin: 20px;width: 100px;"
             @click="edit">编辑信息
  </el-button>

  <div style="margin: 20px;text-align: center;">
    <el-row :gutter="10">
      <el-col :span="4" v-for="(item) in filmData">
        <div style="position: relative">
          <el-image :src="BASE_URL + item.poster"
                    style="width: 100%;height: auto;margin: 0 auto;position: relative;z-index: 1"
                    alt="Film poster"/>
          <div style="position: absolute;bottom: 0;left: 50%; transform: translateX(-50%);z-index: 2;
                        width: 100%;height: 100%;
                       background: linear-gradient(360deg, #0f1827 8%, rgba(15, 24, 39, 0) 70%);   ">
            <p style="position: absolute;bottom: 0;left: 50%;width: 100%;
             transform: translateX(-50%);z-index: 3;
             color: #ffffff;font-size: 16px;font-weight: bold;">{{ item.filmName }} </p>
          </div>

        </div>
        <el-button type="info" style="width: 100%;border-radius: 0"
            @click="editFilm(item.id)"
        >修改</el-button>
      </el-col>
    </el-row>
  </div>

  <el-dialog v-model="dialogVisible"
             title="修改首页电影展示内容"
             style="width: 600px;height: 460px;padding: 30px">
    <el-button type="primary" @click="addFilm"
               v-if="allFilmData.length < 7"
               style="float: right;" link>
      <el-icon size="20">
        <CirclePlus/>
      </el-icon>
    </el-button>
    <el-table :data="allFilmData">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="filmName" label="电影名称" align="center"/>
      <el-table-column prop="sort" label="顺序" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link  @click="editFilm(scope.row.id)">修改</el-button>
          <el-button type="danger" link  @click="deleteFilm(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <el-dialog v-model="addFilmVisible"
             :before-close="cancel"
             :title="addFilmTitle"
             style="width: 500px;height: 260px;padding: 30px">
    <el-form label-width="100">
      <el-form-item label="电影名称">
        <el-select v-model="saveFilm.filmId"
                   clearable
                   filterable
                   placeholder="请选择电影名称">
          <el-option
              v-for="item in allFilm"
              :label="item.filmName"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="电影顺序">
        <el-input v-model="saveFilm.sort" placeholder="请输入电影顺序"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="saveFilmData">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";

const tagList = ref([]);
const nationalityList = ref([]);
onMounted(() => {
  loadDictOptions(tagList, 'tag');
  loadDictOptions(nationalityList, 'nationality');
});
const nationalityFormatter = (row, column, cellValue, index) => {
  if (!nationalityList.value) {
    return cellValue;
  }
  for (let item of nationalityList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
}
const tagFormatter = (row, column, cellValue, index) => {
  if (!tagList.value || !cellValue) {
    return cellValue;
  }
  // 将斜杠分隔的字符串转换为数组
  const tagsArray = cellValue.split('/');
  // 查找并替换每个标签值
  const formattedTags = tagsArray.map(tagValue => {
    for (let item of tagList.value) {
      if (item.value === tagValue) {
        return item.label; // 返回对应的汉字内容
      }
    }
    return tagValue; // 如果没有找到对应的汉字内容，则保留原始值
  });
  // 将格式化后的标签数组重新组合为字符串
  return formattedTags.join('  ');
};
const tagDataFormatter = (row, column, cellValue, index) => {
  if (!tagList.value) {
    return cellValue;
  }
  for (let item of tagList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
}
const tableData = ref([]);
const searchIn = () => {
  axios.get(BASE_URL + '/v1/filmSort/select/' + 1)
      .then((response) => {
        if (response.data.code === 2000) {
          tableData.value = response.data.data[0];
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  searchIn();
});
const filmData = ref([]);
const searchOther = () => {
  axios.get(BASE_URL + '/v1/filmSort/select/notIn/' + 1)
      .then((response) => {
        if (response.data.code === 2000) {
          filmData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  searchOther();
});
const dialogVisible = ref(false);
const edit = () => {
  dialogVisible.value = true;
}
const allFilmData = ref([]);
const selectAll = () => {
  axios.get(BASE_URL + '/v1/filmSort/selectAll')
      .then((response) => {
        if (response.data.code === 2000) {
          allFilmData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  selectAll();
});
const addFilmVisible = ref(false);
const addFilmTitle = ref('添加电影');
const addFilm = () => {
  addFilmVisible.value = true;
}
const saveFilm = ref({
  filmId: '',
  sort: ''
})

const allFilm = ref([])
const searchAllFilm = () => {
  axios.get(BASE_URL + '/v1/film/select?')
      .then((response) => {
        if (response.data.code === 2000) {
          allFilm.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  searchAllFilm();
});
const cancel = () => {
  ElMessageBox.confirm('确定取消吗？', '提示', {
    customClass: 'custom-message-box',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    addFilmVisible.value = false;
    saveFilm.value = {
      filmId: '',
      sort: ''
    }
    Info('已取消')
  }).catch(() => {

  });
}
const saveFilmData = () => {
  let data = qs.stringify(saveFilm.value);
  axios.post(BASE_URL + '/v1/filmSort/save', data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('保存成功')
          addFilmVisible.value = false;
          saveFilm.value = {
            filmId: '',
            sort: ''
          }
          selectAll();
          searchIn();
          searchOther();
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
          })
        }
      });
}
const editFilm = (id) => {
  addFilmVisible.value = true;
  addFilmTitle.value = '修改信息';
  axios.get(BASE_URL + '/v1/filmSort/selectById/' + id)
      .then((response) => {
        if (response.data.code === 2000) {
          saveFilm.value = response.data.data[0];
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
const deleteFilm = (id) => {
  ElMessageBox.confirm('确定删除吗？', '提示', {
    customClass: 'custom-message-box',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    axios.delete(BASE_URL + '/v1/filmSort/delete/' + id)
        .then((response) => {
          if (response.data.code === 2000) {
            OKInfo('删除成功')
            selectAll();
            searchIn();
            searchOther();
          } else {
            ElMessage({
              message: response.data.msg,
              type: 'error',
              showClose: true,
              center: true,
            });
          }
        });
  }).catch(()=>{
    Info('已取消')
  })
}
</script>

<style scoped>

</style>